<template>
	<!-- 话题列表 -->
	<view>
		<mescroll-uni  :height="height+'px'" @init="mescrollInit" :down="downOptions" :up="upOptions"
						@up="upBack" @down="downBack" >
						
						
			<view class="t_list_container" >
			
				<!-- 左侧话题类型 -->
				<view class="t_left_list">
					<scroll-view class="t_left_list_scroll" scroll-y="true" show-scrollbar="false"
								:style="height?'height:'+(height)+'px;':''">
								
						<text v-for="(t,index) in typeList" :key="index" @click="typeSelect(t.id)"
							:class="'t_left_list_item '+ t.cssClass">
							{{t.name}}
						</text>
						
					</scroll-view>
				</view>
			
			
				<!-- 右侧话题列表 -->
				<view class="t_right_list">
				
					<view class="t_right_list_scroll">
						<view class="t_right_item_box" v-for="(item, index) in dataList" :key="index" @click="toTopicDetail(item.id)">
							<image class="category_image" :src="item.cover" mode="aspectFill"></image>
							<view class="category_info_box">
								<text class="category_title"> {{item.name}} </text>
								<view class="category_count">
									{{item.memberCount}} {{item.memberNickname}}
								</view>
							</view>
										
										
							<view class="join_btn" v-if="!item.joined" @click.stop="joinTopic(item)">
								<u-button shape='circle' size="mini" type="primary" text="加入" color="#06a8ff">
								</u-button>
							</view>
							<view class="join_btn" v-else @click.stop="quitTopic(item)">
								<u-button plain shape='circle' size="mini" type="primary" text="已加入" color="#bcc0ca">
								</u-button>
							</view>
						</view>
					</view>
					
					
					<no-data v-if="dataList.length < 1"  :height="height" icon="/static/bg/cat_ts.png" style="margin: 2px;"
						:iconMarginTop="100">
					</no-data>
					
				
					<!-- 最新的帖子及帖子总数 -->
					<!-- <view class="category_article_box">
						<text class="category_article">{{item.name}}</text>
						<view class="article_count">
							<image class="article_count_icon" src="/static/article_msg.png"></image>
							<text class="article_count_txt">99999</text>
						</view>
					</view> -->
				</view>
				
				
			</view>			


		</mescroll-uni>



		<u-modal :show="showQuit" :content="quitTip" showCancelButton width="540rpx">
			<view slot="confirmButton" style="display: flex;flex-direction: row;">
				<u-button plain shape='circle' type="primary" text="退出" color="#bcc0ca" style="width: 80px;"
					@click="doQuitTopic()"></u-button>
				<u-button shape='circle' type="primary" text="再想想" color="#06a8ff" style="width: 80px;"
					@click="showQuit = false"></u-button>
			</view>

		</u-modal>


		<u-toast ref="uToast"></u-toast>




	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import NoData from "@/components/noTips/noData.vue"
	export default {
		props: {
			height: {
				type: Number,
				default () {
					return null
				}
			},
		},
		mixins: [MescrollMixin],
		components: {
			NoData
		},
		data() {
			return {
				downOptions: {
					use: true,
					// 不自动加载
					auto: false,
					empty: {
						use : false
					}
				},
				// 上拉加载的配置参数
				upOptions: {
					// 是否启用上拉加载
					use: true,
					// 不自动加载
					auto: false,
					// 列表已无数据,列表的总数量要大于4才显示无更多数据
					noMoreSize: 12,
					toTop: {
						src: '/static/icon/icon_up2top.png',
						right: '20px',
						bottom: '60px',
						width: '40px',
						height: '40px',
						radius: '0px',
					},
					empty: {
						use : false
					}
				},
				// 当前分类id
				currentType: '',
				// 话题分类列表
				typeList: [],
				// 是否显示退出模态框
				showQuit: false,
				// 退出话题提示
				quitTip: '',
				// 退出话题表单
				quitForm: {
					topic: null
				},
				// 表单
				queryForm: {
					// 当前页
					page: 1,
					// 分页大小
					size: 12,
					// 分类id
					typeId: ''
				},
				// 数据列表
				dataList: [],
				// 没有更多了
				noMore: false,
				// 数据加载中
				loading: false,

			}
		},
		created() {

		},
		methods: {
			// 获取数据
			doGetData(id) {
				this.getTypeList()
				this.queryForm = {
						page: 1,
						size: 10
				},
				this.getTopicList()
			},
			// 获取话题分类
			getTypeList(){
				this.$httpApi.baseArticleGet('open/topic/type',{}).then(({ data }) => {
					if (data.code == "000000") {
						data.data.forEach(item=>{
							item.cssClass = ''
						})
						data.data.unshift({id:'',name: '推荐',cssClass: 't_left_list_item_active'});
						this.typeList = data.data
					} else {
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							message: data.mesg
						})
					}
				}).catch(err => {
				})
			},
			// 获取话题
			getTopicList() {
				this.loading = true
				this.queryForm.page = 1
				this.queryForm.size = 12
				this.$httpApi.baseArticleGet('open/topic/index', this.queryForm).then(({data}) => {
					this.loading = false
					if (data.code == "000000") {
						this.dataList = data.data.records
						this.noMore = data.data.records.length < this.pageSize
						this.mescroll.endSuccess(data.data.records.length,!this.noMore);
					} else {
						this.mescroll.endErr()
						this.$refs.uToast.show({type: 'error',icon: false,message: data.mesg})
					}
				}).catch(err => {
					this.mescroll.endErr()
					this.loading = false
				})
			},
			// 加载更多数据
			loadMoreData() {
				if(this.loading || this.noMore){
					return
				}
				let form = {
					page: this.queryForm.page + 1,
					size: this.queryForm.size,
					typeId: this.queryForm.typeId,
				}
				this.loading = true
				this.$httpApi.baseArticleGet('open/topic/index',form).then(({ data }) => {
					this.loading = false
					if (data.code == "000000") {
						if(data.data.records && data.data.records.length > 0){
							this.queryForm.page += 1
							this.dataList = [...this.dataList, ...data.data.records];
						}
						this.noMore = data.data.records.length < this.pageSize
						this.mescroll.endSuccess(data.data.records.length,!this.noMore);
					} else {
						this.mescroll.endErr()
						this.$refs.uToast.show({type: 'error',icon: false,message: data.mesg})
					}
				}).catch(err => {
					this.mescroll.endErr()
					this.loading = false
				})
			},
			// 加入话题
			joinTopic(item){
				if(!this.$authUtil.isLoginedin(true)){
					return
				}
				uni.showLoading({
					title: '加载中'
				});
				this.$httpApi.baseArticlePost('user/topic/op/'+item.id, {}).then(({data}) => {
					if (data.code == "000000") {
						item.joined = true
						item.memberCount++
					} else {
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							message: data.mesg
						})
					}
					uni.hideLoading();
				}).catch(err => {
					uni.hideLoading();
				})
			},
			// 退出话题
			quitTopic(item) {
				if(!this.$authUtil.isLoginedin()){
					return
				}
				this.quitForm.topic = item
				this.quitTip = '确定退出话题#' + item.name + '?'
				this.showQuit = true;
			},
			// 退出话题
			doQuitTopic(){
				this.$httpApi.baseArticleDelete('user/topic/op/'+this.quitForm.topic.id, {}).then(({data}) => {
					if (data.code == "000000") {
						this.quitForm.topic.joined = false
						this.quitForm.topic.memberCount--
					} else {
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							message: data.mesg
						})
					}
					this.showQuit = false
				}).catch(err => {
					this.showQuit = false
				})
			},
			// 话题类型选中
			typeSelect(id){
				this.queryForm = {
						page: 1,
						size: 10,
						typeId: id
				}
				this.$nextTick(()=>{
					this.getTopicList();
					this.currentType = id;
					this.typeList.forEach(item =>{
						if (item.id == id){
							item.cssClass = 't_left_list_item_active';
						}else{
							item.cssClass = ''
						}
					})
				})
			},
			// 话题详情
			toTopicDetail(id){
				uni.navigateTo({
					url: '/pages/topic/topicDetail?id='+id
				});
			},
			// 下拉刷新
			downBack(page) {
				if(this.loading){
					return
				}
				this.getTopicList()
			},
			/**
			 * 上拉加载的回调
			 */
			upBack(page) {
				if (!this.loading && !this.noMore) {
					this.loadMoreData()
				}
			},



		}
	}
</script>

<style lang="scss" scoped>
	
	.t_list_container {
		display: flex;
		width: 100%;
		flex-direction: row;
		border-top: 3px solid #efefef;
	}
	
	// 左部分类
	.t_left_list {
		position: fixed;
		overflow: hidden;
		background-color: #FFFFFF;
		width: 160upx;
		border-right: 3px solid #efefef;
	}
	// 左部分类滚动
	.t_left_list_scroll {
		display: flex;
		flex: 1;
		flex-direction: column;
		margin-right: 5px;
		height: 100%; 
		overflow-y: auto;
	}
	// 左部分类
	.t_left_list_item {
		display: flex;
		flex-flow: column;
		line-height: 40px;
		width: 160rpx;
		height: 40px;
		font-size: 16px;
		color: #666666;
		text-align: center;
	
	}
	// 左部分类激活
	.t_left_list_item_active {
		background-color: #55aaff;
		border-top-right-radius: 30px;
		border-bottom-right-radius: 30px;
		color: #FFFFFF;
		font-weight: 500;
		background-image: linear-gradient(45deg, #55aaff, #1cbbb4);
	}
	
	

	// 右侧话题显示样式
	.t_right_list {
		flex-grow: 1;
		position: relative;
		margin-left: 164upx;
		padding: 4px 12px 4px 6px;
		background-color: #FFFFFF;
		margin-bottom: 2px;
	}
	.t_right_list_scroll {
		display: flex;
		flex: 1;
		flex-direction: column;
		height: 100%;
		overflow-y: auto;
	}
	.t_right_item_box {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		border-bottom: 3px solid #F2F2F2;
	}

	// 话题图片
	.category_image {
		width: 54px;
		height: 54px;
		border-radius: 10px;
		margin-top: 4px;
		margin-right: 10px;
	}

	// 话题信息
	.category_info_box {
		display: flex;
		flex-flow: column;
		flex: 1;
	}

	// 话题名称
	.category_title {
		flex: 1;
		font-size: 16px;
		line-height: 18px;
		color: #333333;
		margin-top: 12px;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/
	}

	.category_count {
		color: #8a8a8a;
		font-size: 13px;
		margin-bottom: 5px;
	}

	.join_btn {
		width: 50px;
		margin-top: 19px;
	}


	.category_article_box {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		margin-top: 10px;
		border-radius: 5px;
		background-color: #f1f1f1;
		padding: 2px 10px;
	}

	.category_article {
		flex: 1;
		font-size: 13px;
		margin: 5px 0;
		color: #999999;
		line-height: 20px;
		height: 20px;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/
	}

	.article_count {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 43px;
	}

	.article_count_icon {
		width: 12px;
		height: 12px;
		margin-top: 2px;
		margin-right: 3px;
		position: relative;
	}

	.article_count_txt {
		width: 30px;
		text-align: center;
		line-height: 18px;
		font-size: 11px;
		color: #43484D;
	}


	.myBtn {
		height: 22px;
		font-size: 10px;
		min-width: 50px;
		padding: 0px 8px;
		border-color: #3c9cff;
		color: #3c9cff;

		border-width: 1px;
		border-style: solid;
	}


	.loadmore-box {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		background-color: #FEFEFE;
	}

	.refresh-img {
		height: 90px;
		width: 120px;
	}
</style>
